<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="login-box">
					<view class="head-box flexWarpCenterColumn">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="head-img" :src="avatarUrl||sexIcon"></image>
							<image src="../static/user/change-icon.png" class="change-icon"></image>
						</button>
						<text class="head-text">点击设置头像</text>
					</view>
					<view class="sex-box flexWrap">
						<view class="sex-item flexWrapNo" :class="{active:sexIndex==0}" @tap="changeSex(0)"><image class="sex-icon" src="../static/user/boy-icon.png"></image>男性</view>
						<view class="sex-item flexWrapNo" :class="{active:sexIndex==1}" @tap="changeSex(1)"><image class="sex-icon" src="../static/user/girl-icon.png">女性</view>
					</view>
					<view class="input-box flexWrapNo">
						<image src="../static/home/nickname-icon.png" class="input-img"></image>
						<input placeholder="请输入昵称" type="nickname" v-model="nickname" placeholder-class="placeholderClass"/>
					</view>
					<view class="input-box flexWrapNo" v-if="telNum">
						<image src="../static/home/phone-icon.png" class="input-img"></image>
						<input placeholder="请输入手机号码" placeholder-class="placeholderClass" disabled v-model="telNum"/>
					</view>
					<view class="input-box flexWrapNo" v-else>
						<image src="../static/home/phone-icon.png" class="input-img"></image>
						<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="button" >
							请输入手机号码
						</button>
					</view>
					<view class="login-btn" @tap="register()">登录</view>
				</view>
				<view class="protocol-box flexWrapNo" @tap="changeCheck()">
					<view class="cheack" :class="{cheackd:check}"></view>
					我已阅读并同意 <text @tap.stop="goPage('/moduleE/protocol?type=1')">《用户协议》</text>和<text @tap.stop="goPage('/moduleE/protocol?type=2')">《隐私政策》 </text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				avatarUrl:"",
				avatarUpload:"",
				nickname:"",
				gender:"",
				telNum:"",
				telCode:"",
				wxCode:"",
				openid:"",
				couponShow:false,
				couponList:[],
				couponLenth:0,
				check:false,
				sexIndex:0,
				sexIcon:"../static/user/boy.png"
			}
		},
		onLoad(ops) {
			// #ifdef MP-WEIXIN
			wx.hideHomeButton();
			this.wechatLogin();
			//#endif
			this.check=uni.getStorageSync('check')||false
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			changeSex(index){
				this.sexIndex=index
				if(index==0){
					this.sexIcon='../static/user/boy.png'
				}else{
					this.sexIcon='../static/user/girl.png'
				}
			},
			changeCheck(){
				this.check=!this.check
				uni.setStorageSync('check',this.check)
			},
			onChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
				this.uploadFilePromise(e.detail.avatarUrl)
			},
			uploadFilePromise(value) {
				console.log(value)
				let that = this
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let uploadUrl = this.$store.state.debug.getWay + this.$api.uploadImg
				uni.uploadFile({
					url: uploadUrl,
					filePath: value,
					fileType: "image",
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data).data
						console.log(data)
						that.avatarUpload = data.fullurl
					},
					complete: res => {
						uni.hideLoading()
						console.log(res)
					}
				});
			},
			// 获取微信用户code
			wechatLogin() {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						that.wxCode=loginRes.code
						that.getOpenid();
					}
				});
			},
			getOpenid(){
				this.$request.post(this.$api.login, {
					js_code: this.wxCode
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						uni.setStorageSync('token', data.userinfo.token)
						setTimeout(()=>{
							uni.navigateBack({
								detail:1
							})
						}, 1000)
					}else{
						this.openid=data.openid
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 注册
			register(){
				if(!this.check){
					this.$tools.showToast('请同意用户协议和隐私政策!')
					return;
				}
				if(!this.nickname||!this.telNum){
					this.$tools.showToast('请将信息录入完整后登录');
					return;
				}
				this.$request.post(this.$api.register, {
					openid: this.openid,
					phone:this.telNum,
					nickname:this.nickname,
					avatar:this.avatarUpload
				}, {}).then(res => {
					console.log(res)
					if (res.code==1) {
						let {
							data = {}
						} = res;
						console.log(data)
						uni.setStorageSync('token', data.userinfo.token)
						setTimeout(()=>{
							uni.navigateBack({
								detail:1
							})
						}, 1000)
					}
				})
			},
			// 获取用户信息
			getUserProfile() {
				let that = this
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (infoRes) => {
						console.log(infoRes)
						that.avatarUrl=infoRes.userInfo.avatarUrl
						that.nickname=infoRes.userInfo.nickName
					},
					fail: (eorr) => {
						console.log(`getUserInfo 调用失败`);
					}
				})
			},
			// 获取用户手机号
			onGetPhoneNumber(e) {
				console.log("onGetPhoneNumber", e);
				this.telCode=e.detail.code
				this.getPhoneNum()
			},
			getPhoneNum(){
				this.$request.post(this.$api.getPhoneNum, {
					code: this.telCode
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let {
							data = {}
						} = res;
						console.log(data)
						this.telNum=data.phone.phone
					}
				})
			},
			login(){
				uni.reLaunch({
					url:'/pages/home/storeList'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20upx;
	}
	button::after {
		border: none;
	}
	button {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		line-height: 1;
		color: #FFFFFF;
		font-size: 28rpx;
		background: none;
		width: 100%;
		border: none;
		overflow: inherit;
	}
	.login-box{
		.head-box{
			.avatar-wrapper {
				width: 284rpx;
				height: 284rpx;
				border-radius: 50%;
				margin: auto;
				position: relative;
				.head-img {
					width: 284rpx;
					height: 284rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.change-icon{
					width: 70upx;
					height: 70upx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
			.head-text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color:#B0B1B3;
				margin-top: 20upx;
			}
		}
		.sex-box{
			background: #232428;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 24upx;
			margin-top: 36upx;
			.sex-item{
				width: 311rpx;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid rgba(255, 255, 255, .5);
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 34rpx;
				color: #FFFFFF;
				text-stroke: 1px #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
				justify-content: center;
				.sex-icon{
					width: 30upx;
					height: 30upx;
					margin-right: 7upx;
				}
			}
			.active{
				background: #7781FD;
				color: #FFFFFF;
				border: 2rpx solid  #7781FD;
			}
		}
		.input-box{
			height: 144upx;
			background:#232428;
			border-radius: 16upx;
			padding: 0 32upx;
			margin-top: 14upx;
			input{
				height: 144upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:rgba(255,255,255,.5);
			}
			.input-img{
				width: 96upx;
				height: 96upx;
				margin-right: 24upx;
				flex: none;
			}
			.placeholderClass{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 400;
				color:rgba(255,255,255,.5);
			}
		}
		.button{
			height: 144upx;
			line-height: 144upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			color:rgba(255,255,255,.5);
			text-align: left;
			margin-top: 14upx;
		}
		.login-btn{
			height: 144rpx;
			line-height: 144rpx;
			text-align: center;
			background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin: auto;
			margin-top: 14upx;
		}
	}
	.protocol-box{
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color:#B5B6B8;
		margin-top: 100upx;
		justify-content: center;
		.cheack{
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
			border: 1rpx solid #BABABA;
			border-radius: 50%;
		}
		.cheackd{
			width: 42rpx;
			height: 42rpx;
			background: url('/static/select-icon.png') no-repeat center/100% 100%;
			border: none;
		}
	}
</style>
